<template>
  <div>
    <div style="display:flex">
      <div id="container"></div>
      <div class="tab">
        <!-- 标签页组件 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="风景" name="first">
            <ul class="infinite-list" v-for="(item,index) of scenies" :key="index">
              <li
                class="infinite-list-item"
                v-if="item.type.indexOf('风景名胜') > -1 "
                @mouseover="showPoi(item)"
              >
                <span class="title">{{item.name}}</span>
                <span class="distance">{{item.distance}}</span>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="交通" name="second">
            <ul class="infinite-list" v-for="(item,index) of list" :key="index">
              <li
                class="infinite-list-item"
                v-if="item.type.indexOf('交通设施服务') > -1 "
                @mouseover="showPoi(item)"
              >
                <span class="title">{{item.name}}</span>
                <span class="distance">{{item.distance}}</span>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["hotelDetail"],
  data() {
    return {
      map: null,
      scenies: [],
      list: [],
      activeName: "first"
    };
  },
  mounted() {
    this.map = new AMap.Map("container", {
      resizeEnable: true,
      center: [
        this.hotelDetail.location.longitude,
        this.hotelDetail.location.latitude
      ], //中心点坐标
      zoom: 11, //放大级别
      viewMode: "3D" //使用3D视图
    });
    this.getScenies();
  },
  methods: {
    handleClick(tab, event) {
      this.activeName[tab.index];

      if (tab.index == 0) {
        this.getScenies();
      }

      if (tab.index == 1) {
        this.getList();
      }
    },
    getList() {
      this.$axios({
        url: "https://restapi.amap.com/v3/place/around",
        params: {
          key: "0320b639e4e2faa08f9bf20a9936bd39",
          location:
            this.hotelDetail.location.longitude +
            "," +
            this.hotelDetail.location.latitude,
          keywords: "",
          city: this.hotelDetail.real_city,
          types: "交通"
        }
      }).then(res => {
        // console.log(res.data.pois);

        // 计算距离;
        res.data.pois.forEach((item, index) => {
          //  酒店坐标
          let p1 = [
            this.hotelDetail.location.longitude,
            this.hotelDetail.location.latitude
          ];
          //  每一项的坐标
          let p2 = [...item.location.split(",")];
          //  计算两点之间的距离，单位是米
          let dis = AMap.GeometryUtil.distance(p1, p2);
          //  换算单位，米 => 公里
          dis = (dis / 1000).toFixed(2) + "公里";

          item.distance = dis;
        });

        this.list = res.data.pois;

        this.setMarkers(this.list);
      });
    },
    getScenies() {
      this.$axios({
        url: "https://restapi.amap.com/v3/place/around",
        params: {
          key: "0320b639e4e2faa08f9bf20a9936bd39",
          location:
            this.hotelDetail.location.longitude +
            "," +
            this.hotelDetail.location.latitude,
          keywords: "",
          city: this.hotelDetail.real_city,
          types: "风景"
        }
      }).then(res => {
        // 计算距离
        res.data.pois.forEach((item, index) => {
          //  酒店坐标
          let p1 = [
            this.hotelDetail.location.longitude,
            this.hotelDetail.location.latitude
          ];
          //  每一项的坐标
          let p2 = [...item.location.split(",")];
          //  计算两点之间的距离，单位是米
          let dis = AMap.GeometryUtil.distance(p1, p2);
          //  换算单位，米 => 公里
          dis = (dis / 1000).toFixed(2) + "公里";

          item.distance = dis;
        });

        this.scenies = res.data.pois;
        // console.log(this.scenies);

        this.setMarkers(this.scenies);
      });
    },
    setMarkers(data) {
      // 里面的每个元素都需要转换成一个 marker
      const markers = data.map((item, index) => {
        const marker = new AMap.Marker({
          title: item.name,
          position: new AMap.LngLat(...item.location.split(",")),
          offset: new AMap.Pixel(-107, -100),
          // 需要标记 id 的话,可以使用高德提供的提个固定属性
          extData: item.id,
          content: `
            <div class="custom-content-marker"> 
               <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"> 
               <span class="num">${index + 1}</span> 
            </div>
          `
        });

        // 添加 mouseover 事件
        marker.on("mouseover", () => {
          return this.showPoi(item);
        });

        return marker;
      });

      // 先清除旧的点标记再添加
      this.map.clearMap();
      this.map.add(markers);
      // 自动匹配显示位置
      this.map.setFitView();
    },
    showPoi(item) {
      // 1.拿到所有的点
      const markers = this.map.getAllOverlays("marker");

      // 2.遍历
      markers.forEach(marker => {
        // 通过高德的一个属性给每个 marker 添加id
        if (marker.getExtData() == item.id) {
          // 点的 id 等于传进来的对象 id

          // 将匹配的点标记移动到顶部
          marker.setTop(true);

          // 附加显示一个弹窗
          const infoWindow = new AMap.InfoWindow({
            content: `<span>${marker.getTitle()}</span>`,
            offset: new AMap.Pixel(-5, -30)
          });
          infoWindow.open(this.map, marker.getPosition());

          // 将这个点居中
          this.map.setCenter(marker.getPosition());
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
#container {
  width: 650px;
  height: 360px;
  margin: 40px 0;
}
/deep/ .amap-markers {
  .amap-marker {
    top: 0;
    left: 0;
    .custom-content-marker {
      position: relative;
      width: 22px;
      height: 36px;
      img {
        width: 44px;
      }
      .num {
        position: absolute;
        top: 28px;
        right: -90px;
        display: inline-block;
        width: 22px;
        height: 36px;
        text-align: center;
        line-height: 24px;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}

.tab {
  width: 330px;
  height: 360px;
  margin: 30px 0 0 20px;
  /deep/ .el-tabs__content {
    height: 320px;
    overflow-y: scroll;
    .infinite-list-item {
      display: flex;

      margin: 0 20px 22px 10px;
      cursor: pointer;
      font-size: 14px;
      color: #666;
      .title {
        flex: 1;
      }
    }
  }
}
</style>